<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由的基本使用</title>
	<script src="./lib/vue-2.4.0.js"></script>
	<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
	<div id="app">
        <!-- 4.创建点击链接 -->
        <router-link to='/login'>登录</router-link>
        <router-link to='/register'>注册</router-link>

        <!-- 5.创建一个占位符 -->
        <router-view></router-view>
	</div>

	<script>
	    //3.创建组件的模板对象
	    var login={
	    	template:'<h1>我是登录界面</h1>'
	    } 
	    var register={
	    	template:'<h1>我是注册界面</h1>'
	    }

        // 2.创建路由对象
        var route=new VueRouter({
        	routes:[
        		{path:'/login',component:login},
        		{path:'/register',component:register}
        	]
        });

        var vm=new Vue({
        	el:'#app',
        	data:{

        	},
        	methods:{

        	},
        	//1.定义路由在父组件中
        	router:route
        });
	</script>
</body>
</html>